<template>
  <div class="footer">
    <router-link class="item" to="/home" active-class="active"
      ><van-icon name="wap-home-o" size="30" /><span>首页</span></router-link
    >
    <router-link class="item" to="/cart" active-class="active"
      ><van-icon name="shopping-cart-o" size="30" /><span
        >购物车</span
      ></router-link
    >
    <router-link class="item" to="/order" active-class="active"
      ><van-icon name="comment-o" size="30" /><span>订单</span></router-link
    >
    <router-link class="item" to="/mine" active-class="active"
      ><van-icon name="friends-o" size="30" /><span>我的</span></router-link
    >
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.footer {
  display: flex;
  background: #fff;
  border-top: 0.5px solid #eee;
  .active {
    color: #ffc400;
  }
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 14px;
    }
  }
}
</style>
